<template>
    <v-row justify="center" align="center" no-gutters class="ma-2">
        <div style="width: 50%;">
            <v-text-field density="compact" placeholder="名称" variant="outlined" v-model="localConfig.server_name"></v-text-field>
            <v-text-field density="compact" placeholder="服务器地址" variant="outlined" v-model="localConfig.server_url"></v-text-field>
            <v-switch v-model="is_user_proxy" :label="`启用代理: ${is_user_proxy.toString()}`" hide-details inset></v-switch>
            <v-text-field density="compact" placeholder="代理地址" variant="outlined" :disabled="!is_user_proxy" v-model="http_proxy.host"></v-text-field>
            <v-text-field density="compact" placeholder="端口" variant="outlined" :disabled="!is_user_proxy" v-model="http_proxy.port"></v-text-field>
            <v-divider class="ma-2"></v-divider>
            <v-row justify="center" align="center" no-gutters class="ma-2">
                <v-btn prepend-icon="mdi-check" size="large" color="primary" @click="submit">确认提交</v-btn>
            </v-row>
        </div>
    </v-row>
</template>

<script setup lang="ts">
import { defineEmits, ref } from 'vue'
import type { IStudio, IHttpProxy } from "@shared/constans/types/configType"

const is_user_proxy = ref(false)

const localConfig = ref<IStudio>({
    server_name: "",
    server_url: "",
    username: "",
    password: ""
})

const http_proxy = ref<IHttpProxy>({
    enable: false,
    host: "",
    port: ""
})

const emit = defineEmits(['server_config', "proxy_config"]);

function submit() {
    emit('server_config', localConfig.value)
    if (is_user_proxy.value) {
        http_proxy.value.enable = true
        emit('proxy_config', http_proxy)
    }
}

</script>
